<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>详情页</title>
  <style>
    *{
      margin: 0;
      padding: 0;

    }
   
    header {
      width: 1200px;
      height: 75px;
      margin-bottom: 30px;
    }

    header img {
      width: 140px;
      height: 74px;
    }
    
   article{
    width: 700px;
    height: 74px;
    float: right;
    display: flex;
    justify-content: space-evenly;
    line-height: 74px;
    font-size: 20px;
   }

   article a{
    color: #e12f2f;
    text-decoration: none;
    
   }
   article a:hover{
    color: rgb(76, 71, 71);
   }
   /* 放大镜 */
   main .center {
        height: 590px;
        margin: 10px auto;
      }
      main .center .left {
        width: 352px;
        height: 521px;
        padding-bottom: 10px;
        float: left;
        
      }

      main .center .left .tp {
        text-align: center;
        margin-top: 50px;
        padding: 0 16px;
        font-size: 12px;
        width: 72px;
        height: 26px;
        line-height: 26px;
        border: 1px solid #cecece;
        margin: 50px auto 0;
        cursor: pointer;
      }
      main .center .left .tp:hover {
        border: 1px solid orange;
      }

      main .center .right {
        width: 590px;
        height: 590px;
        float: left;
        margin: 0 24px 0 30px;
        position: relative;
      }
      main .center .title {
        font-size: 16px;
        color: #666666;
        padding: 10px 0 5px;
      }
      main .center del {
        font-size: 26px;
        color: red;
        padding: 10px 0 5px;
      }
      main .center .price span {
        font-size: 12px;
      }
      main .center .cur_price {
        color: red;
        margin-bottom: 10px;
      }
      main .center .num {
        margin-top: 15px;
        width: 43px;
        height: 42px;
        outline: none;
        text-align: center;
      }
      main .center .num {
        float: left;
        margin-top: 15px;
        width: 43px;
        height: 40px;
        outline: none;
        border: 1px solid #999;
        text-align: center;
      }
      main .center .jia,
      main .center .jian {
        float: left;
        margin-top: 15px;
        width: 20px;
        height: 42px;
        text-align: center;
        line-height: 42px;
        /* background-color: #9999997f; */
        outline: none;
        cursor: pointer;
      }
      main .center .kucun {
        float: left;
        margin-top: 25px;
        margin-left: 20px;
      }
      main .center .right .cart {
        position: absolute;
        bottom: 240px;
        right: 465px;
        width: 92px;
        height: 46px;
        padding: 0 16px;
        background-color: red;
        color: white;
        text-align: center;
        line-height: 46px;
        cursor: pointer;
      }

      /* 放大镜区 */
      main .center .left .lbox {
        width: 350px;
        position: relative;
        border: 1px solid #cecece;
        /* background-color: #cecece; */
      }

      .mid {
        width: 350px;
        height: 350px;
        float: left;
      }
      .mid img {
        width: 350px;
        height: 350px;
      }
      .fdj {
        display: none;
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: rgba(255, 255, 0, 0.425);
        cursor: move;
      }
      .big {
        width: 500px;
        height: 500px;
        position: absolute;
        z-index: 10;
        left: 400px;
        overflow: hidden;
        top: 0px;
         left: 350px;
        display: none;
        border: 1px solid #dfdfdf;
        border-left: none;
      }
      .big img {
        position: absolute;
        top: 50px;
        left: 300px;
        width: 890px;
        height: 890px;
      }
      .small {
        width: 100px;
        height: 50px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;
        top: 360px;
         left: -250px;
      }
      #detail{
        padding-left: 50px;
       background-color: #e9e3e3;
      }
      .small img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        margin-right: 10px;
        box-sizing: border-box;
        
      }
      .lazyimg img{
        width: 100%;
       
      }
      .small img:nth-of-type(1) {
        border: 1px solid red;
      }
      .lbox{
        width: 1200px;
        height: 600px;
        /* background-color: #999; */
        position: relative;
      }
   
     .tit{
      width: 900px;
      height: 400px;
      /* background-color: pink; */
   
      position: relative;
      top: -620px;
      left : 500px;
      padding-top: 30px;
     
     }
     .tit p{
      font-size: 25px;
      font-weight: 700;
      margin-bottom: 20px;
     }
     .tit .tit2{
      color: #e12f2f;
      font-size: 20px;
      font-weight: 400;
      text-indent: 18px;
      line-height: 30px;
      display: block;
      
     }
     #time{
      width: 1000px;
      height: 120px;
      background-image: url(	https://img2.epetbar.com/nowater/2021-03/10/15/bc4e989bccede01debd0d7b80d9f1106.png);
      background-size: 100%;
      font-size: 40px;
      text-indent: 2em;
      line-height: 40px;
     }
     .end{
      font-size: 26px;
      /* font-weight: 700; */
      color: #fff;
      
     }
     .tit .endtime{
      position: relative;
      right: 150px;
      top: 50px; 
      font-size: 30px;
      color: #f1ecec;
     }
     .tit .price{
      width: 1000px;
      height: 100px;
      background-color: #f5f5f5;
      font-size: 30px;
      
     
     }
     .tit .price span{
      font-size: 50px;
      font-weight: 700;
      display: inline-block;
      margin-top: 30px;
      margin-left: 20px;
     }
     .tit .price .cur_price{
      font-size: 30px;
      color: #444;
      font-weight: 400;
      text-decoration:line-through 
     }
     .carnumbox .carnum{
      width: 90px;
      height: 36px;
      display: flex;
      justify-content: space-evenly;
      background-color: #dfdfdf;
      float: left;
     }
    
     .carnumbox{
      width: 900px;
      height: 100px;

      padding-top: 30px;
      
     }
     .carnumbox .mybuy{
      display: block;
      width:60px;
      height: 40px;
      font-size: 20px;
     float: left;
     position: relative;
     top: 15px;
     }
     .carnumbox .carnum{
      display: block;
      width: 185px;
      height: 52px;
      /* background-color: #929492; */
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      margin-left: 20px;
      color: #b72626;
      cursor: pointer;
     }
     .carnum .num{
      width: 100px;
      height: 52px;
      text-align: center;
      box-sizing: border-box;
      
     }
     .carnumbox .carnum .jia{
      width: 25px;
      height: 50px;
      text-align: center;
      font-size: 30px;
      line-height: 50px;
      
     }
     .carnumbox .carnum .jian{
      width: 25px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
     
     }
     .inp{
      width: 190px;
      height: 56px;
      font-size: 25px;
      color: #fff;
      font-weight: 700;
      border: 1px solid #78b300;
      background-color: #78b300;
      border-radius: 10px;
     
     }
/* .pink{width: 100%;
height: 800px;
position: relative;
top: -400px;} */
.center .lazying {
 
  width: 1200px;
  height: 300px;
  margin: 0 auto;
}
.commodity{
  width: 1200px;
  height: 300px;
  margin: 0 auto;
 position: relative;
 top: -400px;
}
  </style>
</head>

<body>
  <header>
    <span><img src="https://static.epetbar.com/static_web/pc/images/new_logo.png"></span>
     <article>
      <span><a href="">热门搜索：</a></span>
      <span><a href="https://list.epet.com/search/main.html?keyword=173892,203137,701570,1234448,1234484,202287,203136,701554,1234486,145858,1234452,173899,248740,679757,679759,679762,133981,679760,1234478,173898,133985,133327,173897,199889,679761,1234461,1234470,147666,766625,1234444,1234490,133333,139549,199890,202289,146668,173900,145856,146663,199892,731460,1234459,1234482,248630,259648,1234472,173891,679758,199888,1234466,199893,248732,675965,199762,1234476,1234488,139553,675964,701568,145855,248710,145857,199891,701556,1234457,1234474,133977,154247,248716,259656,259647,259655,259649,701552,1234446,1234450,1234463,173893,1234465,248729,675966,1234454,701549,147662,248637,731464,1234468,146664,147667,248628,259646,731462,1234480,248744,133987,202288,701550,248631">滋意巅峰主食罐</a></span>
      <span><a href="https://wap.epet.com/app/orderTopic/2021">周期配送</a></span>
      <span><a href="https://list.epet.com/search/main.html?keyword=723622,723624">枫趣鸭肉橙买一送一</a></span>
     </article>

  </header>
  <main>
    <!-- <div class="center">
      <div class="left">
        <div class="lbox">
          <div class="mid">
            <img src="./img/03.jpg" alt="" />
            <div class="fdj"></div>
          </div>
          <div class="big">
            <img src="img/01.jpg" alt="" />
          </div>
          <div class="small">
            <img src="img/01.jpg" alt="" />
            <img src="img/02.jpg" alt="" />
          </div>
        </div>
      </div> -->
      <div class="right"></div>
    </div>

  </main>
  
  <div id="detail" ></div>
  <div id="goodsDetail"></div>
  <script src="../js/ajax.js"></script>
  <script>
  let goodsBox = document.querySelector("main .center .left");
      
      let goodsId = location.search.split("=")[1];
    const baseUrl = "http://localhost:8888";
    let id = location.search.split("=")[1];
    let detail = document.getElementById("detail");
    let goodsDetail = document.getElementById("goodsDetail");
    ajax({
      url: baseUrl + "/goods/item",
      type: "get",
      params: { id },
      fn(resData) {
        //console.log(JSON.parse(resData));
        resData = JSON.parse(resData);
        if (resData.code == 1) {
 
        detail.innerHTML = `
        <div class="center">
          <div class="left">
        <div class="lbox">
          <div class="mid">
            <img src="${resData.info.img_big_logo}" alt="" />
            <div class="fdj"></div>
          </div>
          <div class="big">
            <img src="${resData.info.img_big_logo}" alt="" />
          </div>
          <div class="small">
            <img src="${resData.info.img_big_logo}" alt="" />
            <img src="${resData.info.img_big_logo}" alt="" />
          </div>
        </div>

      </div>

      </div>
      <div class="tit">
          <p>${resData.info.title}</p>
          <p class="tit2">${resData.info.title}</p>
          <span><span>
          <div id="time"></div>
          <div class="price">惊喜价<span> ￥${resData.info.current_price}</span><span class="cur_price">原价:￥${resData.info.price}</span>
          </div>
          <div class="carnumbox">
            <span class="mybuy">喜爱度</span>
            <div class="carnum"><span class="jian">❤</span>
            <input class="num" type="text" value=1 />
            <span class="jia">❤</span> </div>
           </div>
           <div class="songzhi">
            </div>
          <a href="./DetailsPage.html"><input type="button" value="选择好物 go >" class="inp"></a>
            
          </div>
          
          <div class="commodity">
    <div class="center"></div>
  </div>
  
          `;

        
          //数量加减
          let num = document.querySelector(".num");
          let jia = document.querySelector(".jia");
          let jian = document.querySelector(".jian");
          // let cart = document.querySelector(".inp");
          function calculate() {
            num.value =
              num.value < 1
                ? 1
                : num.value > resData.info.goods_number
                ? resData.info.goods_number
                : num.value;
          }
          num.oninput = function () {
            calculate();
          };
          jian.onclick = function () {
            num.value--;
            calculate();
          };
          jia.onclick = function () {
            num.value++;
            calculate();
          };
// 加减结束
commodity = document.querySelector(".commodity .center");
     
//加入购物车
 let cart = document.querySelector(".inp");
          cart.onclick = function () {
            async function addCart() {
              let goodsData = await post(
                "http://localhost:8888/cart/add",
                {
                  id: localStorage.getItem("pid"),
                  goodsId: goodsId,
                },
                {
                  username: "authorization",
                  password: localStorage.getItem("token"),
                }
              );
              console.log(goodsData);
              if (goodsData.code == 1) {
                location.href = "./DetailsPage.html";
              } 
              else {
                location.href = "./DetailsPage.html";
              }
            }
            addCart();
            // ------------------------修改商品数量------------------------------------
            
            async function revise() {
              let revNmu = await post(
                "http://localhost:8888/cart/number",
                {
                  id: localStorage.getItem("pid"),
                  goodsId: goodsId,
                  number: num.value,
                },
                {
                  username: "authorization",
                  password: localStorage.getItem("token"),
                }
              );
            }
            revise();}
            commodity.innerHTML = `${resData.info.goods_introduce}`;




      
//放大镜
        let oInput = document.querySelector(".inp");
        // console.log(oInput);
        oInput.onclick = function () {
          ajax({
            url: baseUrl + "/cart/add",
            type: "post",
            params: { id: localStorage.getItem("uid"), goodsId: id },
            author: true,
            fn(resData) {
              console.log(resData);
            },  
          });
        };
        let mid = document.querySelector(".mid");
      let big = document.querySelector(".big");
      let small = document.querySelector(".small");
      mid.addEventListener("mouseover", function () {
        //鼠标移入放大镜和大图显示
        mid.children[1].style.display = "block";
        big.style.display = "block";
        //鼠标在图片区移动事件
        mid.onmousemove = function (e) {
          //保证鼠标处于放大境的中心（以视图区域为父级元素定位）
          //放大镜的left值 = 鼠标焦点距页面的左边距 - 视图区域距浏览器视口(页面)的左边距 - 放大镜宽度的一半
          let x =
            e.pageX -
            mid.getBoundingClientRect().left -
            mid.children[1].offsetWidth / 2;
          //放大镜的top值 = 鼠标焦点距页面的上边距 - 视图区域距浏览器视口的上边距 - 滚动条滚动距离 - 放大镜宽度的一半
          let y =
            e.pageY -
            mid.getBoundingClientRect().top -
            document.documentElement.scrollTop -
            mid.children[1].offsetHeight / 2;

          //保证放大镜处于视图区域范围内部
          //最小left为0 ，最大left为视图区域的宽减去放大镜本身的的宽
          //最小top为0 ，最大top为视图区域的高减去放大镜本身的的高
          let lx = mid.offsetWidth - mid.children[1].offsetWidth;
          let ly = mid.offsetHeight - mid.children[1].offsetHeight;
          x = x < 0 ? 0 : x > lx ? lx : x;
          y = y < 0 ? 0 : y > ly ? ly : y;

          mid.children[1].style.left = x + "px";
          mid.children[1].style.top = y + "px";

          //大图的大小：小图的大小 = 大图的定位：小放大镜的定位
          let sx =
            (big.children[0].offsetWidth / mid.children[0].offsetWidth) * x;
          let sy =
            (big.children[0].offsetHeight / mid.children[0].offsetHeight) * y;
          big.children[0].style.left = -sx + "px";
          big.children[0].style.top = -sy + "px";
        };
      });
      //鼠标移出放大镜和大图消失
      mid.addEventListener("mouseout", function () {
        mid.children[1].style.display = "none";
        big.style.display = "none";
      }); 
      
      //切换图片
      small.onmouseover = function (e) {
        if (e.target.tagName == "IMG") {
          for (i = 0; i < small.children.length; i++) {
            small.children[i].style.border = "none";
          }
          e.target.style.border = "1px solid red";
          mid.children[0].src = big.children[0].src = e.target.src;
        }
      };  
      
      var oTime = document.querySelector("#time")
    var preDate = new Date("2023/5/20 9:58:10"); //指定时间
      function djs(d) {
        var nowDate = new Date();
        //时间差值
        var ss = Math.floor((d - nowDate) / 1000);
        //时分秒
        //？这么多秒是由多少小时，多少分，多少秒组成
        var h = Math.floor(ss / 3600);
        var m = Math.floor((ss % 3600) / 60);
        var s = Math.floor(ss % 60);
        oTime.innerHTML =`<span class="end">此活动参与 "换季无忧 品质特惠" 活动</span>
        <span class="endtime">距离活动结束还有 ${h} : ${m} : ${s}</span>`;

        if (ss <= 0) {
          clearInterval(timer);
          oTime.innerText = "秒杀结束";
        }
      }
      djs(preDate);
      var timer = setInterval(function () {
        djs(preDate);
      }, 1000);
      //code=1
    }
      },
      
    }
    
    );
    
    
  


    
         

    
  </script>
</body>

</html>